<template>
  <div id="shopcart">
    <!-- 头部导航栏 -->
    <navigationBar></navigationBar>
    <!-- 右侧固定 -->

    <div class="container">
      <div class="section">
        <!-- 头部全选 -->
        <div class="selall">
          <div class="s_all">
            <img src="../../assets/image/3_1_0_select_u.png" alt />
            <span>全选</span>
          </div>
          <span style="margin-left:148px">商品信息</span>
          <span style="margin-left:380px">单价</span>
          <span style="margin-left:108px">数量</span>
          <span style="margin-left:108px">金额</span>
          <span style="margin-left:108px">操作</span>
        </div>
        <!-- 中部购物车所有商品展示 -->
        <div class="show_car">
          <ul>
            <li v-for="(item,index) in shopcarlist" :key="index" @click="selectgoods(index)">
              <!-- 选择图标 -->
              <img :src="selectIndex === index ? cancel:notarize" alt />
              <div class="goodsshow">
                <div class="img">
                  <img :src="item.imgurl" alt />
                </div>
                <div class="goodsdesc">
                  <p>{{item.goodsname}}</p>
                  <span style="margin-bottom:8px">型号:&nbsp;{{item.goodsmodel}}</span>
                  <span>颜色:&nbsp;{{item.goodscolor}}</span>
                </div>
                <span class="price">{{item.goodsprice}}</span>
                <span class="num">
                  <el-input-number
                    v-model="num"
                    @change="handleChange"
                    :min="1"
                    :max="10"
                    size="mini"
                  ></el-input-number>
                </span>
                <span class="totalprice">￥{{totalprice}}</span>
                <span class="del">删除</span>
              </div>
            </li>
            <!-- 全选批量删除 总金额 去结算 -->
            <div class="car_bot">
              <img src="../../assets/image/3_1_0_select_u.png" alt />
              <span id="all_sel">全选</span>
              <span id="all_del">批量删除</span>
              <span id="selected">
                已选&nbsp;{{sel_num}}&nbsp;件商品，总金额（不含运费）：
                <span id="all_price">{{all_price}}元</span>
              </span>
              <span id="topay" @click="toOrder">去结算</span>
            </div>
          </ul>
        </div>
      </div>
    </div>
    <right></right>
    <foot></foot>
  </div>
</template>

<script>
import navigationBar from "../../components/navigationBar";
import right from "../../components/common/right_logo";
import foot from "../../components/footer";
export default {
  components: {
    navigationBar,
    right,
    foot
  },
  data() {
    return {
      selectIndex: -1, //勾选购物车商品
      cancel: require("../../assets/image/3_1_0_select_u.png"), //未选中时的小图标
      notarize: require("../../assets/image/3_1_0_select_s.png"), //选中时的小图标
      shopcarlist: [
        {
          imgUrl: "",
          goodsname:
            "MSA梅思安 标准型安全帽,黄色PE帽壳,一指键帽衬,PVC吸汗带,D型下颏带",
          goodsprice: "￥99.0/包",
          goodsmodel: "UT395A",
          goodscolor: "黄色"
        },
        {
          imgUrl: "",
          goodsname:
            "MSA梅思安 标准型安全帽,黄色PE帽壳,一指键帽衬,PVC吸汗带,D型下颏带",
          goodsprice: "￥99.0/包",
          goodsmodel: "UT395A",
          goodscolor: "黄色"
        },
        {
          imgUrl: "",
          goodsname:
            "MSA梅思安 标准型安全帽,黄色PE帽壳,一指键帽衬,PVC吸汗带,D型下颏带",
          goodsprice: "￥99.0/包",
          goodsmodel: "UT395A",
          goodscolor: "黄色"
        },
        {
          imgUrl: "",
          goodsname:
            "MSA梅思安 标准型安全帽,黄色PE帽壳,一指键帽衬,PVC吸汗带,D型下颏带",
          goodsprice: "￥99.0/包",
          goodsmodel: "UT395A",
          goodscolor: "黄色"
        },
        {
          imgUrl: "",
          goodsname:
            "MSA梅思安 标准型安全帽,黄色PE帽壳,一指键帽衬,PVC吸汗带,D型下颏带",
          goodsprice: "￥99.0/包",
          goodsmodel: "UT395A",
          goodscolor: "黄色"
        },
        {
          imgUrl: "",
          goodsname:
            "MSA梅思安 标准型安全帽,黄色PE帽壳,一指键帽衬,PVC吸汗带,D型下颏带",
          goodsprice: "￥99.0/包",
          goodsmodel: "UT395A",
          goodscolor: "黄色"
        },
        {
          imgUrl: "",
          goodsname:
            "MSA梅思安 标准型安全帽,黄色PE帽壳,一指键帽衬,PVC吸汗带,D型下颏带",
          goodsprice: "￥99.0/包",
          goodsmodel: "UT395A",
          goodscolor: "黄色"
        },
        {
          imgUrl: "",
          goodsname:
            "MSA梅思安 标准型安全帽,黄色PE帽壳,一指键帽衬,PVC吸汗带,D型下颏带",
          goodsprice: "￥99.0/包",
          goodsmodel: "UT395A",
          goodscolor: "黄色"
        }
      ],
      num: 1,
      totalprice: "180.0",
      sel_num: 4,
      all_price: "720.0"
    };
  },
  methods: {
    toOrder() {
      this.$router.push({ path: "/order", name: "order" });
    },
    // 购物车勾选商品
    selectgoods() {
      this.selectIndex = !this.selectIndex;
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  background-color: rgb(238, 232, 232);
  border-top: 6px solid rgb(238, 232, 232);
  .section {
    width: 1200px;
    margin: 0 auto;
    border-bottom: 20px solid rgb(238, 232, 232);
    min-height: 500px;
    .selall {
      width: 100%;
      height: 50px;
      background: rgba(255, 255, 255, 1);
      margin: 12px 0;
      display: flex;
      align-items: center;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(61, 61, 61, 1);
      .s_all {
        display: flex;
        align-items: center;
        width: 64px;
        justify-content: space-between;
        margin-left: 20px;
        img {
          cursor: pointer;
        }
      }
    }
    .show_car {
      padding: 0 20px;
      box-sizing: border-box;
      width: 100%;
      background-color: #fff;
      ul {
        list-style: none;
        margin: 0;
        padding: 0;
        li {
          display: flex;
          padding: 12px 0;
          border-bottom: 1px solid rgba(219, 219, 219, 1);
          align-items: center;
          img {
            cursor: pointer;
          }
          .goodsshow {
            display: flex;
            align-items: center;
            .img {
              width: 140px;
              height: 120px;
              background: rgba(255, 255, 255, 1);
              border: 1px solid rgba(219, 219, 219, 1);
              padding: 0 10px;
              box-sizing: border-box;
              margin-left: 20px;
              img {
                display: block;

                width: 119px;
                height: 119px;
                border: 1px solid black;
              }
            }
            .goodsdesc {
              width: 380px;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              margin-left: 20px;
              p {
                display: block;
                margin-top: -2px;
                font-size: 18px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: rgba(61, 61, 61, 1);
              }
              span {
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: rgba(127, 127, 127, 1);
              }
            }
            .price {
              font-size: 20px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: rgba(224, 32, 63, 1);
              margin-left: 60px;
            }
            .num {
              margin-left: 30px;
            }
            .totalprice {
              margin-left: 42px;
              font-size: 20px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: rgba(224, 32, 63, 1);
            }
            .del {
              margin-left: 86px;
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: 300;
              color: rgba(92, 92, 92, 1);
              cursor: pointer;
            }
          }
        }
        .car_bot {
          height: 100px;
          display: flex;
          align-items: center;
          img {
            cursor: pointer;
          }
          #all_sel {
            margin-left: 12px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
          }
          #all_del {
            cursor: pointer;
            margin-left: 40px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(254, 44, 74, 1);
          }
          #selected {
            margin-left: 300px;
            display: flex;
            align-items: center;
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(102, 102, 102, 1);
            #all_price {
              font-size: 22px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: rgba(254, 44, 74, 1);
            }
          }
          #topay {
            margin-left: 60px;
            text-align: center;
            line-height: 50px;
            width: 240px;
            height: 50px;
            background: rgba(240, 58, 88, 1);
            border-radius: 6px;
            font-size: 22px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
